import 'dart:async';
import 'package:basic_library/basic_library.dart';
import 'package:flutter/material.dart';

///
/// 弹幕区礼物横幅动画队列
/// 暴露给直播间调用的礼物横幅类
///
class Gift extends HQBase {
  // 在礼物横幅队列中增加
  Gift.add(giftBannerView, json, removeTime, cb) {
    json['widget'] = GiftBanner(
      giftInfo: json['config'],
      queueLength: giftBannerView.length,
    );
    giftBannerView.add(json);
    cb(giftBannerView); // 将重新生成的礼物横幅队列Widget返回给直播间setState

    // 给定时间后从队列中将礼物移除
    Timer(Duration(milliseconds: removeTime), () {
      for (int i = 0; i < giftBannerView.length; i++) {
        if (json['stamp'] == giftBannerView[i]['stamp']) {
          giftBannerView.removeAt(i);
          cb(giftBannerView);
        }
      }
    });
  }
}

class GiftBanner extends StatefulWidget with HQBase {
  final Map giftInfo;
  final int queueLength;

  GiftBanner({Key? key, required this.giftInfo, required this.queueLength})
      : super(key: key);

  @override
  _GiftBannerState createState() => _GiftBannerState();
}

// 单个礼物横幅的动画Widget
class _GiftBannerState extends State<GiftBanner>
    with HQBase, SingleTickerProviderStateMixin {
  late Animation<double> animationGiftNum_1,
      animationGiftNum_2,
      animationGiftNum_3;
  late AnimationController controller;

  @override
  void initState() {
    super.initState();
    if (widget.queueLength >= 4) return;

    controller = AnimationController(
        duration: const Duration(milliseconds: 1800), vsync: this);

    // 礼物数量图片变大
    animationGiftNum_1 = Tween(
      begin: 0.0,
      end: 1.7,
    ).animate(CurvedAnimation(
      parent: controller,
      curve: const Interval(0.75, 0.85, curve: Curves.easeOut),
    ));

    // 礼物数量图片变小
    animationGiftNum_2 = Tween(
      begin: 1.7,
      end: 1.0,
    ).animate(CurvedAnimation(
      parent: controller,
      curve: const Interval(0.85, 1.0, curve: Curves.easeIn),
    ));

    // 横幅从屏幕外滑入
    double an3Begin = -122;
    animationGiftNum_3 = Tween(
      begin: an3Begin,
      end: 0.0,
    ).animate(CurvedAnimation(
      parent: controller,
      curve: const Interval(0.65, 0.85, curve: Curves.easeIn),
    ));

    controller.forward();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: controller,
      builder: (BuildContext context, Widget? child) {
        return Positioned(
          left: animationGiftNum_3.value/2,
          top: 45/2 + 40 * widget.queueLength,
          child: Stack(
            clipBehavior: Clip.none,
            children: <Widget>[
              Container(
                height: 24,
                width: 122,
                decoration: const BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('images/gift-banner.png'),
                    fit: BoxFit.fill,
                  ),
                ),
                child: Row(
                  children: <Widget>[
                    Container(
                      width: 20,
                      height: 20,
                      margin: const EdgeInsets.only(left: 2),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20),
                        image: DecorationImage(
                          image: NetworkImage(widget.giftInfo['avatar']),
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                    SizedBox(
                      height: 24,
                      width: 105/2,
                      child: Padding(
                        padding: const EdgeInsets.all(3/2),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              widget.giftInfo['nickName'],
                              overflow: TextOverflow.ellipsis,
                              style: const TextStyle(color: Colors.white),
                            ),
                            RichText(
                              overflow: TextOverflow.ellipsis,
                              text: TextSpan(
                                  style: const TextStyle(color: Colors.yellow),
                                  children: [
                                    const TextSpan(
                                      text: '送出',
                                    ),
                                    TextSpan(
                                      text: widget.giftInfo['giftName'],
                                      style: const TextStyle(
                                          fontWeight: FontWeight.bold,
                                          fontStyle: FontStyle.italic),
                                    ),
                                  ]),
                            ),
                          ],
                        ),
                      ),
                    ),
                    const Padding(padding: EdgeInsets.only(right: 25)),
                    Padding(
                      padding: const EdgeInsets.only(top: 5),
                      child: Transform.scale(
                        scale: animationGiftNum_1.value >= 1.7
                            ? animationGiftNum_2.value
                            : animationGiftNum_1.value,
                        child: Image.asset(
                          'images/gift-x.png',
                          height: 5,
                        ),
                      ),
                    ),
                    Transform.scale(
                      scale: animationGiftNum_1.value >= 1.7
                          ? animationGiftNum_2.value
                          : animationGiftNum_1.value,
                      child: Image.asset(
                        'images/gift-1.png',
                        height: 15,
                      ),
                    ),
                  ],
                ),
              ),
              Positioned(
                left: 145/2,
                top: -15/2,
                child: Image.network(
                  widget.giftInfo['giftImg'],
                  height: 25,
                ),
              ),
            ],
          ),
        );
      },
      child: null,
    );
  }
}
